{% extends './include/base.html' %}
{% block pages %}
<div class="zhuce">
    <form id="regsub"  method="post" novalidate>
        <!--<form action="{% url 'register' %}"  method="post" novalidate>-->
        {% csrf_token %}
        <p>账号
            <input type="text" name="userName">
        </p>
        <span></span>
        <p>邮箱<input type="text" name="email">
        </p>
        <span></span>
        <p>密码
            <input type="password" name="passWord">
        </p>
        <span></span>
        <p>性别
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
        </p>
        <span></span>
        <p>省份
            <select name="provinces" id="provinces">
                <option value=" ">请选择省份</option>
            </select>
        </p>
        <p>城市
            <select name="city" id="city">
                <option value="">请选择城市</option>
            </select>
        </p>
        <p>区县
            <select name="city" id="countires">
                <option value="">请选择区县</option>
            </select>
        </p>
        <span></span>
        <p>爱好
            <input type="checkbox" value="">
            </p>
        <span></span>
        <p><input class="sub" type="button" value="提交" ></p>
    </form>
</div>
<script src="/statics/js/jquery-3.3.1.min.js"></script>
<script>

    $(function () {
        ajaxsubmit();



        var provinces=[{id:0,name:"河南省"},{id:0,name:"山西省"},{id:0,name:"山东省"}];
        var cities=[["郑州","开封","洛阳","周口"],["太原","大同","阳泉"],["烟台","青岛","济南","威海"]];
        var countires=[[["龙湖区","新郑区"],["金明区","南关区"],["老城","洛龙"],["商水","周口"]],[["迎泽区","万柏林区","小店区","杏花岭区"],["城区","矿区"],["南边区","小北沟"]],[["莱山区","福山区","芝罘区"],["市南","市北"],["市中区","天桥区"],["文登市","乳山市"]]];
        var index1;
        var index2;
        data =JSON.parse(data)
        for(var i=0 ;i< data.length ;i++){
            console.log(i);
            $('#provinces').append("<option value='"+data[i].id+"'>"+provinces[i].name+"</option>");
        };
        $('#provinces').onchange(function () {
            $("#citys").children().not(":eq(0)").remove();
            $(this).children("option:selected").index();
            index1=$(this).children("option:selected").index();
            var city=cities[index1-1];
            for (var j=0;j<city.length;j++) {
                console.log(city[j]);
                $("#citys").append("<option>" + city[j] + "</option>");
            }
        });
        $('#countires').onchange(function () {
            $("#countires").children().not(":eq(0)").remove();
            $(this).children("option:selected").index();
            index1=$(this).children("option:selected").index();
            var country=countires[index2-1];
            for (var j=0;j<country.length;j++) {
                console.log(country[j]);
                $("#city").append("<option>" + country[j] + "</option>");
            }
        });
    });
    $.fn.serializeArrayObj = function () {
        var data={};
        var a = this.serializeArray();
        $.each(a,function () {
            if(data[this.name]){
                if(!data[this.name].push){
                    data[this.name] = [data[this.value]];
                }
                data[data.name].push(this.value ||'');
            }else {
                data[data.name]=this.value ||'';
            }
        });
        console.log(data);
        return data;
    }
    function ajaxsubmit() {
        $('.zhuce').on('click','.sub',function () {
            var param = $('#regsub').serializeArrayObj();
            $.ajax({
                url: '/app02/zhuce/',
                method: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                date: JSON.stringify(param),
                success: function (arg) {
                    if (arg) {
//                        window.location.href='/app02/login';
                        console.log(arg)
                    }
                    else {
                        console.log(arg)
                    }
                }
            })
        }
    )};

</script>
{% endblock %}